<template>
  <div class="message-wrap" ref="root">
    <slot></slot>
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'

const root = ref(null)
const emits = defineEmits(['intersect'])

let observer
onMounted(() => {
  observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          emits('intersect')
          observer.unobserve(root.value)
        }
      })
    },
    {
      root: root.value.parentNode,
      threshold: 0.95,
    },
  )
  observer.observe(root.value)
})
onBeforeUnmount(() => {
  if (observer) {
    observer.disconnect()
  }
})
</script>
